<template>
	<button class="generic-btn" @tap="handleTap">
		<text class="btn-text">{{ buttonText }}</text>
	</button>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
	buttonText: {
		type: String,
		default: '按钮'
	}
})

const emit = defineEmits(['tap'])

const handleTap = () => {
	emit('tap')
}
</script>

<style lang="scss" scoped>
.generic-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	border-radius: 24rpx;
	background: linear-gradient(to right, #3E3A39, #3E3A39, #3E3A39);
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
	animation: fadeInUp 0.5s ease-out both;
}

.btn-text {
	color: #fff;
	font-size: 30rpx;
	font-weight: 600;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>
